<template>
  <div id="InterNet">
    <div class="jx-content">
      <div class="topcoumt">
        <div class="search-box fl">
          <el-form :inline="true" :model="Form" class="fl">
            <el-form-item label="教师信息 :">
              <el-input
                v-model="Form.info"
                placeholder="请输入教师信息"
                maxlength="20"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色 :">
              <el-select v-model="Form.role" placeholder="请选择角色">
                <el-option
                  v-for="item in Form.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="学校 :">
              <el-input
                v-model="Form.schoolName"
                placeholder="请输入学校信息"
                maxlength="20"
              ></el-input>
            </el-form-item> -->
          </el-form>
          <div class="all-btn" @click="searchFn">搜 索</div>
        </div>
        <div class="btn-group fr">
          <div class="all-btn" @click="deleteAll()">批量删除</div>
        </div>
        <div class="btn-group fr" style="margin-right: 10px">
          <div class="all-btn" @click="add()">添 加</div>
        </div>
      </div>
      <div class="my-table-wrap">
        <div class="my-table">
          <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column prop="name" label="教师名称"></el-table-column>
            <el-table-column prop="userNumber" label="工号"></el-table-column>
            <el-table-column prop="roleName" label="角色"></el-table-column>
            <!-- <el-table-column
              prop="province"
              label="省份"
            > </el-table-column>
            <el-table-column
              prop="schoolName"
              label="学校"
            > </el-table-column>
            <el-table-column
              prop="applicant"
              label="申请人"
            > </el-table-column> -->
            <el-table-column prop="createTime" label="创建日期">
            </el-table-column>
            <el-table-column prop="destroyTime" label="截止日期">
            </el-table-column>
            <el-table-column prop="statusName" label="状态"> </el-table-column>
            <el-table-column label="操作" width="280">
              <template #default="scope">
                <el-button
                  type="text"
                  size="small"
                  style="color: #959595; font-size: 14px"
                  v-if="scope.row.allowedModified == false"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  style="color: #457aff; font-size: 14px"
                  @click="
                    repeatFn(
                      scope.row.id,
                      scope.row.name,
                      scope.row.userNumber,
                      scope.row.sexName,
                      scope.row.roleName,
                      scope.row.telephoneNumber,
                      scope.row.email,
                      scope.row.applicant,
                      scope.row.destroyTime,
                      scope.row.province,
                      scope.row.schoolName,
                      scope.row.courseDirectionHideIds
                    )
                  "
                  v-if="scope.row.allowedModified == true"
                >
                  修改
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  style="color: #457aff; font-size: 14px"
                  @click="active(scope.row.id, scope.row.status)"
                  v-if="scope.row.allowedModified == false"
                  >激活</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  style="color: #457aff; font-size: 14px"
                  @click="cacncel(scope.row.id, scope.row.status)"
                  v-if="scope.row.allowedModified == true"
                  >销户</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  style="color: #457aff; font-size: 14px"
                  @click="repeatCode(scope.row.id)"
                  v-if="scope.row.allowedModified == true"
                  >初始密码</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  style="color: #959595; font-size: 14px"
                  v-if="scope.row.allowedModified == false"
                  >初始密码</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
          class="my-pagination"
        ></el-pagination>
      </div>
      <el-dialog
        class="add-teacher"
        :close-on-click-modal="false"
        title="添加教师"
        v-model="dialogVisible"
        width="700px"
        @close="closeDialog"
      >
        <el-form ref="formlist" :inline="true" :rules="rules" :model="formlist">
          <el-form-item label="姓名 :" prop="name">
            <el-input
              v-model="formlist.name"
              placeholder="请输入姓名"
              maxlength="64"
            ></el-input>
          </el-form-item>
          <el-form-item label="工号 :" prop="number">
            <el-input
              v-model="formlist.number"
              placeholder="请输入工号"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号 :" prop="telephone">
            <el-input
              v-model="formlist.telephone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="销毁日期 :" prop="week">
            <el-date-picker
              v-model="formlist.week"
              type="date"
              @change="changeTime"
              placeholder="请选择销毁日期"
              :picker-options="pickerBeginDateBefore"
              format="YYYY/M/D"
              value-format="YYYY/M/D"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="申请人 :" prop="applicant">
            <el-input
              v-model="formlist.applicant"
              placeholder="请输入申请人"
            ></el-input>
          </el-form-item>
          <el-form-item label="省份 :" prop="provinces">
            <el-select v-model="formlist.provinces" placeholder="请选择省份">
              <el-option
                v-for="item in formlist.provincesList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学校 :" prop="school">
            <el-input
              v-model="formlist.school"
              placeholder="请输入学校"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱 :" prop="email">
            <el-input
              v-model="formlist.email"
              placeholder="请输入邮箱号"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色：" prop="role">
            <el-select v-model="formlist.role" placeholder="请选择角色">
              <el-option
                v-for="item in formlist.options"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别 :" prop="gender">
            <el-radio-group v-model="formlist.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="密 码 :" prop="passWord">
            <el-input
              type="password"
              v-model="formlist.passWord"
              maxlength="14"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码 :" prop="checkPass">
            <el-input
              type="password"
              v-model="formlist.checkPass"
              maxlength="14"
              placeholder="请输入确认密码"
            ></el-input>
          </el-form-item>
          <!-- <template v-if="formlist.options2.length>0">
            <el-form-item
              label="课程展示 :"
              prop="value"
              class="cascader-courde"
            >
              <el-cascader
                v-model="formlist.value"
                :options="formlist.options2"
                :props="cascaderProps"
                collapse-tags
                clearable
              ></el-cascader>
            </el-form-item>
          </template> -->
        </el-form>
        <div class="btn-center" style="text-align: center; margin-top: 40px">
          <button class="button-style" @click="submit('formlist')">
            保 存
          </button>
        </div>
      </el-dialog>
      <el-dialog
        :close-on-click-modal="false"
        title="修改教师"
        v-model="dialogVisibleable"
        width="690px"
        @close="closeDialogaa"
      >
        <el-form
          ref="formlist2"
          :inline="true"
          :rules="rules"
          :model="formlist2"
        >
          <el-form-item label="姓 名 :" prop="name">
            <el-input
              v-model="formlist2.name"
              placeholder="请输入姓名"
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item label="工 号 :" prop="number">
            <el-input
              v-model="formlist2.number"
              placeholder="请输入工号"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号 :" prop="telephone">
            <el-input
              v-model="formlist2.telephone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="销毁日期:" prop="week">
            <el-date-picker
              v-model="formlist2.week"
              type="date"
              @change="changeTime"
              placeholder="请选择销毁日期"
              :picker-options="pickerBeginDateBefore"
              format="YYYY/M/D"
              value-format="YYYY/M/D"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="申请人 :" prop="applicant">
            <el-input
              v-model="formlist2.applicant"
              placeholder="请输入申请人"
            ></el-input>
          </el-form-item>
          <el-form-item label="省 份 :">
            <!-- <el-input v-model="formlist2.provinces" placeholder="请输入省份"></el-input> -->
            <el-select v-model="formlist2.provinces" placeholder="请选择省份">
              <el-option
                v-for="item in formlist.provincesList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学 校 :">
            <el-input
              v-model="formlist2.school"
              placeholder="请输入学校"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮 箱 :">
            <el-input
              v-model="formlist2.email"
              placeholder="请输入邮箱号"
            ></el-input>
          </el-form-item>
          <el-form-item label="角 色 :" prop="role">
            <el-select
              v-model="formlist2.role"
              placeholder="请选择角色"
              disabled
            >
              <el-option
                v-for="item in formlist.options"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性 别 :">
            <el-radio-group v-model="formlist2.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <template v-if="formlist2.options2.length>0">
            <el-form-item
              label="课程展示 :"
              prop="value"
              class="cascader-courde"
            >
              <el-cascader
                v-model="formlist2.value"
                :options="formlist2.options2"
                :props="cascaderProps"
                collapse-tags
                clearable
              ></el-cascader>
            </el-form-item>
          </template> -->
        </el-form>
        <div class="btn-center" style="text-align: center; margin-top: 40px">
          <button class="button-style" @click="submitFn('formlist2')">
            保 存
          </button>
        </div>
      </el-dialog>
      <el-dialog
        :close-on-click-modal="false"
        title="激活选项"
        v-model="dialog"
        width="400px"
        @close="closeDialogDate"
      >
        <el-form :inline="true" :model="destructionDate" ref="destructionDate">
          <el-form-item label="销毁日期:">
            <el-date-picker
              v-model="destructionDate.time"
              type="date"
              @change="changeTime"
              placeholder="请选择销毁日期"
              :picker-options="pickerBeginDateBefore"
              format="YYYY/M/D"
              value-format="YYYY/M/D"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="btn-center" style="text-align: center">
          <button class="button-style" @click="Save">保 存</button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    //邮箱
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请正确填写邮箱"));
      } else {
        if (value !== "") {
          var reg =
            /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          if (!reg.test(value)) {
            callback(new Error("请输入有效的邮箱"));
          }
        }
        callback();
      }
    };
    //手机号验证
    var validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else {
        if (value !== "") {
          var reg = /^1[3456789]\d{9}$/;
          if (!reg.test(value)) {
            callback(new Error("请输入正确的11位手机号码"));
          }
        }
        callback();
      }
    };
    // 密码验证
    var validatePass = (rule, value, callback) => {
      let self = this;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value !== "") {
        var reg = /^[a-zA-Z0-9]{6,14}$/;
        if (!reg.test(value)) {
          callback(new Error("请输入6-14位数字或中英文字符"));
        }
        if (self.formlist.checkPass !== "") {
          self.$refs.formlist.validateField("checkPass");
        }
      }
      callback();
    };
    var validatePass2 = (rule, value, callback) => {
      let self = this;
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== "") {
        var reg = /^[a-zA-Z0-9]{6,14}$/;
        if (!reg.test(value)) {
          callback(new Error("请输入6-14位数字或中英文字符"));
        }
        if (value !== self.formlist.passWord) {
          callback(new Error("两次输入密码不一致!"));
        }
      }
      callback();
    };
    return {
      //id添加集合
      idLists: [],
      idLists2: [],
      idIndex: "",
      dialogs: false,
      dialogVisibleable: false,
      closeId: "", //销户Id
      id: "", //激活id
      multipleSelection: [],
      dialog: false,
      dialogVisible: false,
      //销毁日期
      destructionDate: {
        time: "",
      },
      cascaderProps: {
        value: "idStr",
        label: "label",
        multiple: true,
        emitPath: false,
      },
      formlist: {
        //添加
        value: [],
        options2: [],
        number: "",
        name: "",
        checkPass: "",
        passWord: "",
        telephone: "",
        role: "",
        email: "",
        gender: "",
        week: "",
        provinces: "",
        applicant: "",
        school: "",
        provincesList: [
          {
            value: "1",
            label: "北京",
          },
          {
            value: "2",
            label: "天津",
          },
          {
            value: "3",
            label: "重庆",
          },
          {
            value: "4",
            label: "河北",
          },
          {
            value: "5",
            label: "山西",
          },
          {
            value: "6",
            label: "辽宁",
          },
          {
            value: "7",
            label: "吉林",
          },
          {
            value: "8",
            label: "黑龙江",
          },
          {
            value: "9",
            label: "江苏",
          },
          {
            value: "10",
            label: "浙江",
          },
          {
            value: "11",
            label: "安徽",
          },
          {
            value: "12",
            label: "福建",
          },
          {
            value: "13",
            label: "江西",
          },
          {
            value: "14",
            label: "山东",
          },
          {
            value: "15",
            label: "河南",
          },
          {
            value: "16",
            label: "湖南",
          },
          {
            value: "17",
            label: "湖北",
          },
          {
            value: "18",
            label: "广东",
          },

          {
            value: "19",
            label: "四川",
          },
          {
            value: "20",
            label: "贵州",
          },
          {
            value: "21",
            label: "云南",
          },
          {
            value: "22",
            label: "陕西",
          },
          {
            value: "23",
            label: "甘肃",
          },
          {
            value: "24",
            label: "青海",
          },
          {
            value: "25",
            label: "内蒙古",
          },
          {
            value: "26",
            label: "广西",
          },
          {
            value: "27",
            label: "西藏",
          },
          {
            value: "28",
            label: "宁夏",
          },
          {
            value: "29",
            label: "新疆维吾尔自治区",
          },
          {
            value: "30",
            label: "新疆",
          },
          {
            value: "31",
            label: "上海",
          },
          {
            value: "32",
            label: "海南",
          },
        ],

        options: [
          {
            label: "普通教师",
          },
          {
            label: "超级教师",
          },
          // {
          //   label: "高校教师",
          // },
          // {
          //   label: "销售教师",
          // },
        ],
      },
      courseBasicIds: [],
      formlist2: {
        //编辑
        value: [],
        options2: [],
        number: "",
        name: "",
        checkPass: "",
        passWord: "",
        telephone: "",
        role: "",
        email: "",
        gender: "",
        week: "",
        provinces: "",
        applicant: "",
        school: "",
        provincesList: [
          {
            value: "1",
            label: "北京",
          },
          {
            value: "2",
            label: "天津",
          },
          {
            value: "3",
            label: "重庆",
          },
          {
            value: "4",
            label: "河北",
          },
          {
            value: "5",
            label: "山西",
          },
          {
            value: "6",
            label: "辽宁",
          },
          {
            value: "7",
            label: "吉林",
          },
          {
            value: "8",
            label: "黑龙江",
          },
          {
            value: "9",
            label: "江苏",
          },
          {
            value: "10",
            label: "浙江",
          },
          {
            value: "11",
            label: "安徽",
          },
          {
            value: "12",
            label: "福建",
          },
          {
            value: "13",
            label: "江西",
          },
          {
            value: "14",
            label: "山东",
          },
          {
            value: "15",
            label: "河南",
          },
          {
            value: "16",
            label: "湖南",
          },
          {
            value: "17",
            label: "湖北",
          },
          {
            value: "18",
            label: "广东",
          },

          {
            value: "19",
            label: "四川",
          },
          {
            value: "20",
            label: "贵州",
          },
          {
            value: "21",
            label: "云南",
          },
          {
            value: "22",
            label: "陕西",
          },
          {
            value: "23",
            label: "甘肃",
          },
          {
            value: "24",
            label: "青海",
          },
          {
            value: "25",
            label: "内蒙古",
          },
          {
            value: "26",
            label: "广西",
          },
          {
            value: "27",
            label: "西藏",
          },
          {
            value: "28",
            label: "宁夏",
          },
          {
            value: "29",
            label: "新疆维吾尔自治区",
          },
          {
            value: "30",
            label: "新疆",
          },
          {
            value: "31",
            label: "上海",
          },
          {
            value: "32",
            label: "海南",
          },
        ],
        options: [
          {
            label: "普通教师",
          },
          {
            label: "超级教师",
          },
          // {
          //   label: "高校教师",
          // },
          // {
          //   label: "销售教师",
          // },
        ],
      },
      Form: {
        info: "",
        role: "",
        schoolName: "",
        options: [
          {
            label: "普通教师",
          },
          {
            label: "超级教师",
          },
          // {
          //   label: "高校教师",
          // },
          // {
          //   label: "销售教师",
          // },
        ],
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        value: [
          {
            type: "array",
            required: true,
            message: "请选择课程",
            trigger: "change",
          },
        ],
        // email: [
        //     { required: true, message: '请输入邮箱', trigger: 'blur' },
        //     { required: true, validator: validateEmail, trigger: 'blur' }
        // ],
        number: [{ required: true, message: "请输入工号", trigger: "blur" }],
        role: [{ required: true, message: "请输入角色", trigger: "blur" }],
        people: [{ required: true, message: "请输入申请人", trigger: "blur" }],
        // school: [
        //     { required: true, message: '请输入学校', trigger: 'blur' }
        // ],
        passWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      currentPage: 1,
      pagesize: 10,
      totalCount: 1000,
      tableData: [],
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          return time.getTime() + 3600 * 1000 * 24 < Date.now();
        },
      },
    };
  },
  created() {
    //此处需要得到角色身份
    this.couseAdd();
    this.init();
    this.getCourseList();
  },
  methods: {
    init() {
      console.log("init");
      let self = this;
      self.$axios
        .get(
          "/tes/user/page?pageNum=" +
            self.currentPage +
            "&pageSize=" +
            self.pagesize +
            "&identity=" +
            1 +
            "&roleName=" +
            self.Form.role +
            "&userInfo=" +
            self.Form.info +
            "&schoolName=" +
            self.Form.schoolName
        )
        .then((response) => {
          console.log(response, "response");
          let res = response;
          if (res.code == "200") {
            console.log(response, "response");
            self.tableData = res.data.content;
            console.log(self.tableData, "tabledata");
            self.totalCount = res.data.total;
          } else {
            self.$message.error(res.message);
          }
        });
    },
    getCourseList() {
      let self = this;
      self.$axios.get("/tes/direction/course/list").then((response) => {
        let res = response;

        if (res.code == "200") {
          // for(var i= 0; i<res.data.length; i++){
          //          let obj ={}
          //          obj.label = res.data.schoolType[i].keyValue
          //          obj.value = res.data.schoolType[i].id
          //         //  self.formlist.options2.push(obj)
          //         //  self.formlist2.options2.push(obj)
          //          self.idLists.push(res.data.schoolType[i].id)
          //          self.idLists2.push(res.data.schoolType[i].id)

          //      }

          self.formlist.options2 = res.data;
          self.formlist2.options2 = res.data;
        } else {
          self.$message.error(res.message);
        }
      });
    },
    changeTime(date) {
      this.pickerBeginDateAfter = {
        disabledDate(time) {
          //开始时间-结束时间
          return time.getTime() < new Date(date).getTime();
        },
      };
    },
    //新添加课程 点击添加
    couseAdd() {
      let self = this;
      self.$axios
        .get("/tes/unauthorized/config?keys=schoolType")
        .then((response) => {
          let res = response;
          if (res.code == "200") {
            if (res.data.schoolType != undefined) {
              for (var i = 0; i < res.data.schoolType.length; i++) {
                let obj = {};
                obj.label = res.data.schoolType[i].keyValue;
                obj.value = res.data.schoolType[i].id;
                //  self.formlist.options2.push(obj)
                //  self.formlist2.options2.push(obj)
                self.idLists.push(res.data.schoolType[i].id);
                self.idLists2.push(res.data.schoolType[i].id);
              }
            } else {
              //   self.formlist.options2 = []
              //   self.formlist2.options2 = []
            }
          } else {
            self.$message.error(res.message);
          }
        });
    },
    //激活
    active(id, status) {
      this.dialog = true;
      this.id = id;
    },

    //修改关闭弹窗
    closeDialogaa() {
      this.$refs.formlist2.resetFields();
    },
    //全选
    handleSelectionChange(val) {
      let valArr = [];
      for (let i = 0; i < val.length; i++) {
        valArr.push(val[i].id);
      }
      this.multipleSelection = valArr;
    },
    //关闭弹窗
    closeDialog() {
      this.$refs.formlist.resetFields();
    },
    closeDialogDate() {
      this.destructionDate.time = "";
    },
    //搜索
    searchFn() {
      this.currentPage = 1;
      this.init();
    },
    //添加保存
    submit(formlist) {
      let self = this;
      self.courseBasicIds = [];
      this.formlist.value.forEach((item, index) => {
        if (
          item &&
          item.indexOf("&") != -1 &&
          item.lastIndexOf("&") != item.length - 1
        ) {
          self.courseBasicIds.push(item);
        }
      });
      //过滤得到非选中项
      let difference = this.idLists
        .concat(this.formlist.value)
        .filter(
          (v) => this.idLists.includes(v) && !this.formlist.value.includes(v)
        );
      console.log(difference, "difference");
      self.$refs[formlist].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在保存中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          self.$axios
            .post("/tes/user?identity=1", {
              name: self.formlist.name,
              userNumber: self.formlist.number,
              courseBasicIds: self.courseBasicIds,
              telephoneNumber: self.formlist.telephone,
              applicant: self.formlist.applicant,
              destroyTimeStr: self.formlist.week,
              email: self.formlist.email,
              province: self.formlist.provinces,
              roleName: self.formlist.role,
              schoolName: self.formlist.school,
              sexName: self.formlist.gender,
              password: self.formlist.passWord,
              courseDirectionHideIds: difference,
            })
            .then((response) => {
              let res = response;
              if (res.code == "200") {
                self.$message({
                  message: "保存成功",
                  type: "success",
                });
                self.init();
                self.dialogVisible = false;
                loading.close();
                // this.$refs[formlist].resetFields()
              } else {
                self.$message.error(res.message);
                loading.close();
              }
            })
            .finally(() => {
              loading.close();
            });
        }
      });
    },
    //修改保存
    submitFn(formlist2) {
      let self = this;

      self.courseBasicIds = [];
      this.formlist2.value.forEach((item, index) => {
        if (
          item &&
          item.indexOf("&") != -1 &&
          item.lastIndexOf("&") != item.length - 1
        ) {
          self.courseBasicIds.push(item);
        }
      });

      // return
      //过滤得到非选中项
      let difference = this.idLists2
        .concat(this.formlist2.value)
        .filter(
          (v) => this.idLists2.includes(v) && !this.formlist2.value.includes(v)
        );
      self.$refs[formlist2].validate((valid) => {
        if (valid) {
          self.$axios
            .put("/tes/user/" + self.idIndex + "?identity=1", {
              name: self.formlist2.name,
              userNumber: self.formlist2.number,
              courseBasicIds: self.courseBasicIds,
              telephoneNumber: self.formlist2.telephone,
              applicant: self.formlist2.applicant,
              destroyTimeStr: self.formlist2.week,
              email: self.formlist2.email,
              province: self.formlist2.provinces,
              roleName: self.formlist2.role,
              schoolName: self.formlist2.school,
              sexName: self.formlist2.gender,
              password: self.formlist2.passWord,
              courseDirectionHideIds: difference,
            })
            .then((response) => {
              let res = response;
              if (res.code == "200") {
                self.$message({
                  message: "保存成功",
                  type: "success",
                });
                self.init();
                // location.reload();
                self.dialogVisibleable = false;
              } else {
                self.$message.error(res.message);
              }
            });
        }
      });
    },
    //激活保存
    Save() {
      let self = this;
      self.$axios
        .put("/tes/user/" + self.id + "/status", {
          status: 1,
          destroyTimeStr: self.destructionDate.time,
        })
        .then((response) => {
          let res = response;
          if (res.code == "200") {
            self.$message({
              message: "激活成功",
              type: "success",
            });
            self.init();
            self.dialog = false;
          } else {
            self.$message.error(res.message);
          }
        });
    },
    //销户
    cacncel(id) {
      let self = this;
      self.$axios
        .put("/tes/user/" + id + "/status", {
          status: 2,
          destroyTimeStr: "",
        })
        .then((response) => {
          let res = response;
          if (res.code == "200") {
            self.$message({
              message: "注销成功",
              type: "success",
            });
            self.init();
          } else {
            self.$message.error(res.message);
          }
        });
    },
    //添加
    add() {
      this.dialogVisible = true;
    },
    //删除方法
    commonFn(id, message) {
      let self = this;
      self
        .$confirm("" + message + ",确定删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
        .then(() => {
          self.$axios
            .post(
              "/tes/user/batch-delete?errorFlag=true",
              self.multipleSelection
            )
            .then((response) => {
              let res = response;
              if (res.code == "200") {
                self.$message({
                  message: "删除成功",
                  type: "success",
                });
                self.init();
              } else {
                self.$message.error(res.message);
              }
            })
            .catch(() => {});
        });
    },
    //批量删除
    deleteAll() {
      let self = this;
      if (self.multipleSelection.length == 0) {
        self.$message({
          message: "请选择要删除的内容",
          type: "warning",
        });
        return;
      }
      self
        .$confirm("是否删除选中?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          const loading = self.$loading({
            lock: true,
            text: "正在删除中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          self.$axios
            .post("/tes/user/batch-delete?errorFlag=", self.multipleSelection)
            .then(
              (response) => {
                let res = response;
                if (res.code == "200") {
                  self.$message({
                    message: "删除成功",
                    type: "success",
                  });
                  self.currentPage = 1;
                  self.init();
                  loading.close();
                } else if (res.code == "501") {
                  self.commonFn(self.multipleSelection, res.message);
                  loading.close();
                } else {
                  self.$message.error(res.message);
                  loading.close();
                }
              },
              (err) => {
                loading.close();
              }
            );
        })
        .finally(() => {
          loading.close();
        });
    },
    //修改
    repeatFn(
      id,
      name,
      userNumber,
      sexName,
      roleName,
      telephoneNumber,
      email,
      applicant,
      destroyTime,
      province,
      schoolName,
      courseDirectionHideIds
    ) {
      (this.idIndex = id), (this.formlist2.name = name);
      this.formlist2.number = userNumber;
      this.formlist2.gender = sexName;
      this.formlist2.role = roleName;
      this.formlist2.telephone = telephoneNumber;
      this.formlist2.email = email;
      this.formlist2.applicant = applicant;
      this.formlist2.week = destroyTime;
      this.formlist2.provinces = province;
      this.formlist2.school = schoolName;
      this.formlist2.value = [];
      this.$axios
        .get("/tes/course/preseted-selection/user?userId=" + id)
        .then((response) => {
          let res = response;
          if (res.code == "200") {
            // this.formlist2.value = [
            //     ['1','1&', '1&24'],
            // ]
            // res.data.forEach((item)=>{
            //     this.formlist2.value.push(item)
            // })
            this.formlist2.value = res.data;
            this.$forceUpdate();
            this.dialogVisibleable = true;
          } else {
            self.$message.error(res.message);
          }
        });
      // this.formlist2.value = courseBasicIds || []
      // if(courseDirectionHideIds == undefined){
      //     this.formlist2.value = this.idLists2
      // }else{
      //     let deff = this.idLists2.concat(courseDirectionHideIds).filter(v =>  this.idLists2.includes(v) && !courseDirectionHideIds.includes(v))
      //     this.formlist2.value = deff
      // }
    },
    //初始化密码
    repeatCode(id) {
      let self = this;
      self.$axios.put("/tes/user/" + id + "/init-password").then((response) => {
        let res = response;
        if (res.code == "200") {
          self.$message({
            message: "修改成功",
            type: "success",
          });
        } else {
          self.$message.error(res.message);
        }
      });
    },

    //分页
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.init();
    },
  },
};
</script>
<style>
.fl {
  float: left;
}
.fr {
  float: right;
}
</style>
<style lang="scss" scoped>
.my-table-wrap {
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 7px 0px rgba(70, 123, 235, 0.13);
  border-radius: 10px;
  border: 1px solid #ffffff;
  .my-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
.all-btn {
  height: 34px;
  line-height: 34px;
}
.el-picker-panel {
  width: 330px !important;
}
.el-select {
  width: 192px;
}
.el-select :deep(.el-input__inner) {
  width: 170px;
}

.el-form-item > label {
  text-align: right;
}
.el-form--inline :deep(.el-form-item__label) {
  text-align: right;
  float: left;
  display: inline-block;
  width: 90px;
}
.el-form :deep(.el-input__inner) {
  width: 170px;
  min-height: 32px;
}
.el-form :deep(.el-form-item__content) {
  height: 32px;
}
.cascader-courde :deep(.el-input__inner) {
  width: 290px;
  height: 32px !important;
}

.cascader-courde :deep(.el-tag) {
  max-width: 100px;
}
.add-teacher :deep(.el-input__inner) {
  width: 200px !important;
}
</style>
<style lang="scss" scoped>
#InterNet {
  margin: 20px auto;
  color: #727272;
  .topcoumt {
    overflow: hidden;
    .button-style {
      margin-right: 15px;
    }
  }
}
.button-style {
  border: 1px solid #457aff; /* 假设$btn-blue的颜色值为#0e76a8 */
  height: 32px;
  width: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  color: #457aff; /* 同样假设$btn-blue的颜色值为#0e76a8 */
  cursor: pointer;
  border-radius: 20px;
  padding: 0 16px;
  font-size: 14px;
  display: inline-block;
  box-sizing: border-box;
  background: white;
}

.button-style:hover {
  background: #457aff; /* 假设$btn-blue的颜色值为#0e76a8 */
  color: white;
}

.button-style:focus {
  background: white;
  border: 1px solid #457aff; /* 假设$btn-blue的颜色值为#0e76a8 */
  color: #457aff; /* 同样假设$btn-blue的颜色值为#0e76a8 */
}

.button-style:focus:hover {
  background: #457aff; /* 假设$btn-blue的颜色值为#0e76a8 */
  color: white;
}
</style>
